<!--
 * @Author: lwHao
 * @Date: 2020-11-06 14:40:22
 * @LastEditors: lwHao
 * @LastEditTime: 2020-11-06 18:36:58
-->
<template>
  <Layout>
    <el-card shadow="hover" v-for="({node:item},index) in $page.blogs.edges" :key="'p'+index" style="margin-bottom: 20px" v-if="!item.hide">
      <div slot="header">
        <el-row>
          <el-col :span="16">
            <span>
              <a style="text-decoration:none;cursor:pointer" @click="goDetails(item.id)">
                <i class="el-icon-edit-outline"></i>
                &nbsp;&nbsp; {{item.title}}
              </a>
            </span>
          </el-col>
          <el-col :span="8">
            <div style="text-align: right;">
              <!-- <el-button @click="$share('/user/blog/details/'+item.id)" style="padding: 3px 0" type="text" icon="el-icon-share"></el-button> -->
              <!-- <el-button @click="editBlog(index)" style="padding: 3px 0" type="text" icon="el-icon-edit" v-if="token"></el-button>
              <el-button @click="deleteBlog(index)" style="padding: 3px 0" type="text" icon="el-icon-delete" v-if="token"></el-button> -->
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="font-size: 0.9rem;line-height: 1.5;color: #606c71;">最近更新 {{item.updateTime}}</div>
      <div style="font-size: 1.1rem;line-height: 1.5;color: #303133;padding: 10px 0px 0px 0px">{{item.body}}</div>
    </el-card>
    <div style="text-align: center">
      <el-pagination @current-change="onSelect" background layout="prev, pager, next" :current-page.sync="$page.blogs.pageInfo.currentPage" :page-size="10" :total="$page.blogs.pageInfo.totalItems"></el-pagination>
    </div>
  </Layout>
</template>
<page-query>
query ($page: Int) {
  blogs:allPost(page:$page ,perPage:10) @paginate {
    edges{
      node{
        id
        userId
        title
        body
      }
    }
    pageInfo {
      totalPages
      currentPage
      totalItems
    }
  }
}
</page-query>
<script>
export default {
  name: 'Blog',
  metaInfo: {
    title: '博客列表'
  },
  methods: {
    goDetails(id) {
      this.$router.push(`/blog/info/${id}`)
    },
    onSelect(page) {
      this.$router.push('/blog'+ (page===1? '' : `/${page}`))
    }
  }

}
</script>

<style>
</style>